<template>
  <el-container class="layout-container" style="height: 100vh;width: 100vw;">
    <el-aside width="200px">
      <el-menu active-text-color="#ffd04b" background-color="#545c64" class="el-menu-vertical" text-color="#fff"
        :unique-opened="true" router>
        <el-sub-menu index="/" class="submenu">
          <template #title>
            <el-icon>
              <IconMenu />
            </el-icon>
            <span>生产数据管理</span>
          </template>
          <el-menu-item index="/">应用总览</el-menu-item>
          <el-menu-item index="/origin">原始数据</el-menu-item>
          <el-menu-item index="/processed">数据标注</el-menu-item>
          <el-menu-item index="/pre">积液识别</el-menu-item>
          <el-menu-item index="/stop">停喷预警</el-menu-item>
        </el-sub-menu>
        <!-- <el-sub-menu index="2">
          <template #title>
            <el-icon>
              <location />
            </el-icon>
            <span>实时数据管理</span>
          </template>
          <el-menu-item index="2-1">item one</el-menu-item>
          <el-menu-item index="2-2">item two</el-menu-item>
          <el-menu-item index="2-3">item three</el-menu-item>
        </el-sub-menu> -->
      </el-menu>
    </el-aside>
    <el-container>
      <el-main class="main-container">
        <!-- // 使用 $route.meta 的 keepAlive 属性 -->
        <keep-alive>
          <router-view v-if="route.meta.keepAlive"></router-view>
        </keep-alive>
        <router-view v-if="!route.meta.keepAlive"></router-view>
      </el-main>
    </el-container>
  </el-container>

</template>

<script lang="ts" setup>
import {
  Document,
  Menu as IconMenu,
  Location,
  Setting,
} from '@element-plus/icons-vue'
import { useRoute } from 'vue-router';
const route = useRoute();
const handleOpen = (key: string, keyPath: string[]) => {
  console.log(key, keyPath)
}
const handleClose = (key: string, keyPath: string[]) => {
  console.log(key, keyPath)
}
</script>

<style lang="scss">
.el-menu-vertical {
  height: 100vh;

  .el-menu-item {
    background-color: var(--vt-c-divider-dark-2);
  }
}

.header {
  background-color: var(--vt-c-white-soft);
  color: #000;
  display: flex;

  h1 {
    margin: auto;
  }
}
</style>
